<template>
  <detailbox :title="type == 1 ? '重新编辑' : '新增'" @leftclick="close" loading>
    <div slot="right" class="flex_item flex_between">
      <div v-if="type == 1" class="error error_f f12 ml10 flex_start">
        <i class="f14 el-icon-error"></i>
        审核未通过:
        <span class="ml30">{{ checkItem.type == 1 ? '审核人:' : checkItem.type == 3 ? '记录责任人:' : checkItem.type == 4 ? '批准人:' : '' }} {{ checkItem.createUserName }}</span>
        <span class="ml30">未通过原因: {{ checkItem.content }}</span>
      </div>
      <div v-else></div>
      <div class="flex_end">
        <el-button type="success" size="small" @click="addFile" v-if="type != 1">添加新增</el-button>
        <el-button v-if="type == 1" type="primary" size="small" plain @click="openDialg('showhistory')">审批历史详情</el-button>
        <el-button type="primary" size="small" @click="submit">提交</el-button>
      </div>
    </div>
    <el-row>
      <el-col :span="18">
        <div style="margin-top:10px;" v-for="(form, index) in formList" :key="index">
          <basic-container>
            <div class="main_title success_f flex_between">
              <b>
                管理信息
                <span v-if="formList.length > 1">({{ index + 1 }})</span>
              </b>
              <el-button type="danger" size="small" plain v-if="index != 0" @click="delFile(index)">删除</el-button>
            </div>
            <el-divider></el-divider>
            <div class="mb20">
              <span class="index_num success_bg">1</span>
              <b class="f14">基础信息</b>
            </div>
            <div>
              <el-form size="small" :model="form" label-position="left">
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="风险管理计划编号:" required>
                      <el-input v-model="form.number" placeholder="数据带入" class="w160 ml10" readonly v-if="form.numberType == 0"></el-input>
                      <el-input class="ml10 w160" placeholder="请输入" v-model="form.number" v-if="form.numberType == 1"></el-input>
                      <el-popover placement="top-start" title="编号规则:" width="220" trigger="hover">
                        <div>
                          <p>FXJH--------风险计划</p>
                          <p>xxxx---------年月日(编辑日期，8位)</p>
                          <p>xx---------流水号,从01开始</p>
                        </div>
                        <i slot="reference" class="el-icon-question f18 gray_f ml10"></i>
                      </el-popover>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="风险管理计划名称:" required><el-input class="w160" v-model="form.name" placeholder="请输入"></el-input></el-form-item>
                  </el-col>
                </el-row>
                <div class="f14 mb20">
                  岗位培训信息
                  <el-button size="mini" class="el-icon-circle-plus-outline ml10" type="primary" plain @click="addItem(form)">增加</el-button>
                </div>
                <div class="reviewCon mb20" v-for="(item, i) in form.productList" :key="i">
                  <el-row class="reviewList">
                    <el-col :span="8">
                      <el-form-item label="产品名称:" required>
                        <el-select class="w160" placeholder="请选择" v-model="form.productName" filterable @change="changproduct($event, form)">
                          <el-option v-for="(item, i) in developmentplanList" :key="i" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="产品编号:" required><el-input class="w160" v-model="form.productCode" placeholder="数据带入" readonly></el-input></el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="规格型号:" required><el-input class="w160" v-model="form.skus" placeholder="数据带入" readonly></el-input></el-form-item>
                    </el-col>
                    <i class="error_f el-icon-delete pointer f20 delete" @click="delItem(form, i)" v-if="i != 0"></i>
                  </el-row>
                </div>

                <!-- 管理计划 -->
                <div class="reviewTitle flex_start mb20">
                  <div class="">管理计划</div>
                  <el-button type="primary" size="mini" class="el-icon-circle-plus-outline ml10" plain @click="addList(form, 0)">增加</el-button>
                </div>
                <div class="mb20" v-for="(item, i) in form.planList" :key="i">
                  <div class="reviewList">
                    <el-row>
                      <el-col :span="24">
                        <el-form-item label="产品生命周期阶段:" required>
                          <el-select v-model="item.lifeCycleStage" style="width:70%;" allow-create filterable placeholder="请输入/创建/搜索">
                            <el-option v-for="item in lifeCycleStageList" :key="item" :label="item" :value="item"></el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="24">
                        <el-form-item label="风险管理活动:" required><el-input style="width: 70%;" placeholder="请输入" v-model="item.activity"></el-input></el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item  label="计划时间:" required>
                          <el-date-picker class="w160" value-format="yyyy-MM-dd" v-model="item.planDate" type="date" placeholder="选择日期"></el-date-picker>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item  label="责任人:" required>
                          <el-select class="w160" v-model="item.principal" filterable placeholder="请选择">
                            <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <i class="error_f el-icon-delete pointer f20 delete" @click="delplanList(form.planList, i)" v-if="i != 0"></i>
                  </div>
                </div>

                <!-- 风险可接受准则 -->
                <div class="reviewTitle mb20" style="margin-top:50px;">
                  风险可接受准则
                  <!-- <el-button type="primary" size="mini" class="el-icon-circle-plus-outline ml10" plain @click="addList(index, 1)">增加</el-button> -->
                </div>
                <div class=" " v-for="(item, i) in form.guidelinesList" :key="i">
                  <div class="p20 gray_bg mb20">
                    <div class="reviewTitle flex_start mb20">
                      <div>
                        <i class="error_f">*</i>
                        风险的严重度水平分级
                        <el-popover placement="top-start" title="风险的严重度分级示例" width="700" trigger="hover">
                          <fxyzd></fxyzd>
                          <i slot="reference" class="el-icon-warning f18 gray_f ml10"></i>
                        </el-popover>
                      </div>
                    </div>
                    <div class="reviewList gray_bg mb20">
                      <el-row>
                        <el-col :span="8">
                          <el-form-item label="严重度水平分级:" required>
                            <el-select class="w160" v-model="item.severityLevelRating" filterable placeholder="请选择" @change="changfxitem($event, item, 0)">
                             <el-option :label="jhdata.fxyzd[S1]" value="S1"></el-option>
                              <el-option :label="jhdata.fxyzd[S2]" value="S2"></el-option>
                              <el-option :label="jhdata.fxyzd[S3]" value="S3"></el-option>
                              <el-option :label="jhdata.fxyzd[S4]" value="S4"></el-option>
                              <el-option :label="jhdata.fxyzd[S5]" value="S5"></el-option>
                            </el-select>
                          </el-form-item>
                        </el-col>
                       <el-col :span="8">
                          <el-form-item class="m0" label="严重度名称:" required>
                            <el-input class="w160" placeholder="数据带入" readonly v-model="item.severityName"></el-input>
                          </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item class="m0" label="定义:" required>
                            <el-input class="w160" placeholder="数据带入" readonly v-model="item.definition"></el-input>
                          </el-form-item>
                        </el-col>
                      </el-row>
                    </div>
                    <div v-if="item.severityLevelRating"><fxyzd></fxyzd></div>
                  </div>

                  <div class="p20 gray_bg mb20">
                    <div class="reviewTitle flex_start mb20">
                      <div>
                        <i class="error_f">*</i>
                        风险的概率分级
                        <el-popover placement="top-start" title="风险的概率分级" width="570" trigger="hover">
                          <fxgl></fxgl>
                          <i slot="reference" class="el-icon-warning f18 gray_f ml10"></i>
                        </el-popover>
                      </div>
                    </div>
                    <div class="reviewList gray_bg mb20">
                      <el-row class="flex_wrap">
                        <el-col :span="8">
                          <el-form-item label="概率分级:" required>
                            <el-select class="w160" v-model="item.probabilityGrading" filterable placeholder="请选择" @change="changfxitem($event, item, 1)">
                              <el-option :label="jhdata.fxgl[P1]" value="P1"></el-option>
                              <el-option :label="jhdata.fxgl[P2]" value="P2"></el-option>
                              <el-option :label="jhdata.fxgl[P3]" value="P3"></el-option>
                              <el-option :label="jhdata.fxgl[P4]" value="P4"></el-option>
                              <el-option :label="jhdata.fxgl[P5]" value="P5"></el-option>
                            </el-select>
                          </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item label="概率分级名称:" required>
                            <el-input class="w160" placeholder="数据带入" readonly v-model="item.probabilityGradingName"></el-input>
                          </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item  label="频次（人次/年）:" required>
                            <div class="flex_item el-input-small">
                              <span class="w160 white_bg border el-input__inner" v-html="item.frequency ? item.frequency : '数据带入'"></span>
                            </div>
                            <!-- <el-input class="w160" placeholder="数据带入" v-model="item.frequency" readonly></el-input> -->
                          </el-form-item>
                        </el-col>
                      </el-row>
                      <div v-if="item.probabilityGrading"><fxgl></fxgl></div>
                    </div>
                  </div>

                  <div class="p20 gray_bg mb20">
                    <div class="reviewTitle flex_start mb20">
                      <div>
                        <i class="error_f">*</i>
                        风险评价准则
                        <el-popover placement="top-start" title="风险评价示例" width="600" trigger="hover">
                          <fxpj></fxpj>
                          <i slot="reference" class="el-icon-warning f18 gray_f ml10"></i>
                        </el-popover>
                      </div>
                    </div>
                    <div class="reviewList gray_bg">
                      <el-row class="flex_wrap">
                        <el-col :span="12">
                          <el-form-item label="风险评价:" required>
                            <el-input class="w300" readonly placeholder="数据带入" v-model="item.riskAssessment"></el-input>
                          </el-form-item>
                        </el-col>
                      </el-row>
                    </div>
                  </div>
                </div>
                <!-- 风险可接受准则 -->

                <el-row class="flex_wrap">
                  <el-col :span="12">
                    <el-form-item label="管理部门:" required>
                      <el-cascader
                        class="w160"
                        placeholder="请选择"
                        ref="newdept"
                        :options="deptOption"
                        v-model="form.manageDeptId"
                        :show-all-levels="false"
                        :props="{
                          value: 'id',
                          label: 'deptName',
                          emitPath: false,
                          checkStrictly: true
                        }"
                        filterable
                        @change="getMemberOption($event, index)"
                      ></el-cascader>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="负责人:" required>
                      <el-select class="w160" placeholder="请选择" v-model="form.manageUserId" filterable @change="selectChange($event, form)">
                        <el-option v-for="item in form.memberOption" :key="item.id" :value="item.id" :label="item.name"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="编制部门:"><el-input class="w160" v-model="userInfo.deptName" placeholder="数据带入" readonly></el-input></el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
            <div style="margin-bottom: 10px;"><creat-file :form="form"></creat-file></div>
          </basic-container>
        </div>
      </el-col>
      <el-col :span="6" style="margin-top:10px;"><creat-flow ref="creatFlow" :formList="formList"></creat-flow></el-col>
    </el-row>
    <steps ref="steps" @close="success()" :nowdate="nowdate"></steps>
    <confirm
      ref="confirm"
      @close="save()"
      type="1"
      :guifanFilesProcessRecordList="guifanFilesProcessRecordList"
      :systemGuifanFilesProcessList="systemGuifanFilesProcessList"
    ></confirm>
    <showhistory ref="showhistory" type="1" :guifanFilesProcessRecordList="guifanFilesProcessRecordList"></showhistory>
  </detailbox>
</template>

<script>
// const jhdata = require('./components/jhdata.js');
// import confirm from './confirm.vue';
// import fxpj from './components/fxpj.vue';
// import fxgl from './components/fxgl.vue';
// import fxyzd from './components/fxyzd.vue';
import { getuserByDept } from '@/api/myapi/common';
import { savefiles, getguifanDetail, update, getguifanList } from '@/api/myapi/tixiwenjian';
export default {
  props: {
    detailId: '',
    type: {
      type: [Number, String],
      default: 0
    }
  },
  // components: {
  //   confirm,
  //   fxpj,
  //   fxgl,
  //   fxyzd
  // },
  data() {
    return {
      jhdata,
      system: 'riskplanprocess',
      developmentplanList: [],
      formList: [
        {
          number: '',
          name: '',
          numberType: '',
          productName: '',
          skus: '', // 产品规格
          productCode: '',
          planList: [{}],
          guidelinesList: [{}],
          productList:[{}],
          manageUserId: '',
          manageUserName: '',
          createDeptName: '',
          manageDeptId: '',
          manageDeptName: '',
          retentionPeriod: '',
          guifanFilesIds: '',
          jiluFilesIds: '',
          jiluFileList: [],
          guifanFileList: [],
          memberOption: []
        }
      ],
      guifanFilesProcessRecordList: [],
      systemGuifanFilesProcessList: []
    };
  },
  created() {
    if (this.detailId) {
      this.getDetail();
    } else {
      this.findTypeByProcessType();
    }
    this.getdeptlist();
    this.getAlluser();
    this.getdevelopmentplanList();
  },
  methods: {
    getDetail() {
      getguifanDetail(
        {
          id: this.detailId
        },
        this.system
      ).then(({ data }) => {
        console.log(data);
        if (data.success) {
          if (this.type == 2) {
            delete data.data.id;
            data.data.number = '';
            data.data.numberType = 0;
            this.findTypeByProcessType();
          }
          this.formList = [data.data];
          this.formList.forEach(item => {
            this.getuserByDept(item.manageDeptId, item);
          });
          this.guifanFilesProcessRecordList = data.data.processRecordList;
          this.checkItem = this.guifanFilesProcessRecordList.find(item => item.checkStatus == 2);
          this.$nextTick(() => {
            this.$refs.creatFlow.setProcessRecord(this.guifanFilesProcessRecordList);
          });
        }
      });
    },
    close() {
      this.$emit('close');
    },
    changproduct(id, form) {
      let nodes = this.developmentplanList.find(item => item.id == id);
      console.log(nodes);
      form.productName = nodes.name;
      form.productCode = nodes.code;
      form.skus = nodes.skus;
      form.overview = nodes.overview;
      form.applicationScope = nodes.applicationScope;
      // this.formList[index].p
    },
    getMemberOption(val, index) {
      let dept = this.$refs.newdept[index].getCheckedNodes();
      this.formList[index].manageDeptName = dept[0].label;
      this.formList[index].manageDeptId = dept[0].value;
      this.formList[index].manageUserId = '';
      this.formList[index].manageUserName = '';
      this.getuserByDept(val, this.formList[index]);
    },
    delplanList(array, i) {
      array.splice(i, 1);
    },
    addItem(form){
      if(!form.productList) this.$set(form,'productList',[]);
      form.productList.push({});
    },
    addList(form, type) {
      if (type == 0) {
        form.planList.push({});
      } else {
        form.guidelinesList.push({});
      }
    },
    //   选择风险
    changfxitem(id, item, type) {
      if (type == 0) {
        item.severityLevelRating = id;
        item.severityName = jhdata.fxyzd[id];
        item.definition = jhdata.fxyzddy[id];
      } else {
        item.probabilityGrading = id;
        item.probabilityGradingName = jhdata.fxgl[id];
        item.frequency = jhdata.fxgldy[id];
      }
      // A:可接受的风险（X1+X2） // U:不可接受的风险（X1+X2）// X1是指:严重度水平分级 // X2是指:概率分级
      // console.log(item.severityLevelRating)
      if (item.probabilityGrading && item.severityLevelRating) {
        let riskAssessment = jhdata.fxpj[item.probabilityGrading][item.severityLevelRating];
        if (riskAssessment == 'A') {
          item.riskAssessment = `A:可接受的风险(${item.severityLevelRating}+${item.probabilityGrading})`;
        } else {
          item.riskAssessment = `U:不可接受的风险(${item.severityLevelRating}+${item.probabilityGrading})`;
        }
      }
    },
    //  设计开发计划
    getdevelopmentplanList() {
      getguifanList(
        {
          current: 1,
          size: 10000,
          isTongguo: 1
        },
        'developmentplanprocessproduct'
      ).then(({ data }) => {
        if (data && data.success) {
          this.developmentplanList = data.data.records;
        }
      });
    },
    submit() {
      let systemGuifanFilesProcessList = [];
      let guifanFilesProcessRecordList = this.$refs.creatFlow.guifanFilesProcessRecordList;
      let isOnlineReview = this.$refs.creatFlow.isOnlineReview;
      for (let i = 0; i <= guifanFilesProcessRecordList.length - 1; i++) {
        let item = guifanFilesProcessRecordList[i];
        if (item.type == 1 && !item.userId) {
          this.$message.error('请选择审核人员');
          return;
        }
        if (item.type == 4 && !item.userId) {
          this.$message.error('请选择批准人员');
          return;
        }
        if (isOnlineReview && item.type == 3 && !item.userId) {
          this.$message.error('请选择记录责任人');
          return;
        }
      }
      for (let i = 0; i < this.formList.length; i++) {
        let item = this.formList[i];
        let arr = [
          {
            value: item.number,
            tips: '请补充风险管理编号'
          },
          {
            value: item.name,
            tips: '请补充风险管理名称'
          },
          {
            value: item.manageDeptId,
            tips: '请选择管理部门'
          },
          {
            value: item.manageUserId,
            tips: '请选择负责人'
          },
          {
            value: item.jiluFilesIds,
            tips: '请添加记录文件'
          },
          {
            value: item.retentionPeriod,
            tips: '请输入记录保留期限'
          },
          {
            value: item.retentionPeriod < 2 ? false : true,
            tips: '记录保留期限应≥2年'
          }
        ];
        for (let j = 0; j < arr.length; j++) {
          if (!arr[j].value) {
            this.$message.error(arr[j].tips);
            return;
          }
        }
        item.createDeptName = this.userInfo.deptName;
        item.createUserName = this.userInfo.user_name;
        item.createUserId = this.userInfo.user_id;
        item.createDeptId = this.userInfo.deptId;
        systemGuifanFilesProcessList.push({
          ...item,
          processRecordList: guifanFilesProcessRecordList
        });
      }
      this.systemGuifanFilesProcessList = systemGuifanFilesProcessList;
      this.guifanFilesProcessRecordList = guifanFilesProcessRecordList;
      console.log(this.systemGuifanFilesProcessList);
      console.log(this.guifanFilesProcessRecordList);
      this.openDialg('confirm');
    },
    // 保存
    save() {
      if (this.type == 1) {
        update(this.systemGuifanFilesProcessList, this.system).then(({ data }) => {
          if (data.success) {
            this.$message.success('提交成功');
            this.nowdate = this.dateFormat(new Date());
            this.openDialg('steps');
          }
        });
      } else {
        savefiles(this.systemGuifanFilesProcessList, this.system).then(({ data }) => {
          if (data.success) {
            this.$message.success('提交成功');
            this.nowdate = this.dateFormat(new Date());
            this.openDialg('steps');
          }
        });
      }
    },
    success() {
      this.$emit('success');
    },
    // 发放的文件
    addFile() {
      this.formList.push({
        memberOption: [],
        numberType: this.numberType,
        number: this.numberType == 0 ? this.findTypeByProcessType(this.liushuihao) : '',
        name: '',
        manageUserId: '',
        manageUserName: '',
        createDeptName: this.userInfo.user_name,
        createDeptId: this.userInfo.user_id,
        manageDeptId: '',
        manageDeptName: '',
        retentionPeriod: '',
        guifanFilesIds: '',
        jiluFilesIds: '',
        jiluFileList: [],
        guifanFileList: [],
        planList: [
          {
            activity: '', //风险管理活动
            lifeCycleStage: '', //	产品生命周期阶段
            planDate: '',
            principal: ''
          }
        ],
        guidelinesList: [
          {
            definition: '', //	定义		false
            frequency: '', //	频次		false
            probabilityGrading: '', //	概率分级		false
            probabilityGradingName: '', //	概率分级名称		false
            riskAssessment: '', //	风险评价		false
            severityLevelRating: '', //	严重度水平分级		false
            severityName: '', //	严重度名称		false
            sort: '' //	排序		false
          }
        ]
      });
    }
  }
};
</script>

<style scoped="scoped" lang="scss">
.btnbox {
  border: 1px solid #a3cffd;
  opacity: 1;
  border-radius: 3px 0px 0px 3px;
}

.btnleft {
  padding: 0 10px;
}

.btnright {
  border-left: 1px solid #a3cffd;
  padding: 0 10px;
  line-height: 32px;
}

.border {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  line-height: 32px;
  padding: 0 10px;
}

.preview {
  padding: 10px;
  background-color: #f0f2f5;
  margin-top: 20px;
  margin-left: 10px;
}

.preview .warn_f {
  background-color: #fbf4e0;
  border: 1px solid #f3dea4;
  line-height: 20px;
  padding: 0 4px;
  margin: 20px 0 10px;
}

.preview .tem {
  width: 377px;
  height: 512px;
}

.preview.bigpreview {
  background-color: #ffffff;
}

.preview.bigpreview .tem {
  width: 510px;
  height: 693px;
}

.error {
  background-color: #fceeec;
  border: 1px solid #f9dcd9;
  padding: 6px 10px;
  border-radius: 2px;
}

div::deep .el-checkbox.is-bordered {
  height: 32px;
  padding: 5px 10px;
}

.fileBox {
  position: relative;
  padding: 20px 10px 1px;
  border: 1px dashed #e4e8ed;

  .del {
    position: absolute;
    right: 10px;
    top: 10px;
  }
}

.worktable {
  td,
  th {
    line-height: 28px;
  }
}

.steps {
  .f16 {
    margin-left: 6px;
  }

  .flex_center {
    margin-bottom: 7px;
  }
}

.btnbox {
  border: 1px solid #a3cffd;
  opacity: 1;
  border-radius: 3px 0px 0px 3px;
}

.btnleft {
  padding: 0 10px;
}

.btnright {
  border-left: 1px solid #a3cffd;
  padding: 0 10px;
  line-height: 32px;
}

.border {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  line-height: 32px;
  padding: 0 10px;
}

.preview {
  padding: 10px;
  background-color: #f0f2f5;
  margin-top: 20px;
  margin-left: 10px;
}

.preview .warn_f {
  background-color: #fbf4e0;
  border: 1px solid #f3dea4;
  line-height: 20px;
  padding: 0 4px;
  margin: 20px 0 10px;
}

.preview .tem {
  width: 377px;
  height: 512px;
}

.preview.bigpreview {
  background-color: #ffffff;
}

.preview.bigpreview .tem {
  width: 510px;
  height: 693px;
}

.error {
  background-color: #fceeec;
  border: 1px solid #f9dcd9;
  padding: 6px 10px;
  border-radius: 2px;
}

div::deep .el-checkbox.is-bordered {
  height: 32px;
  padding: 5px 10px;
}

.jobfile {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.jobLeft {
  width: 34%;
}

.leftTitle {
  height: 48px;
  background: #f5f7fa;
  border: 1px solid #ebf0f5;
  opacity: 1;
  line-height: 48px;
  border-radius: 0px;
  padding: 0 15px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #303133;
  opacity: 1;
}

.leftList {
  height: 98px;
  background: #ffffff;
  border: 1px solid #ebf0f5;
  opacity: 1;
  line-height: 95px;
  border-radius: 0px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 15px;
}

.cenList {
  height: 48px;
  background: #ffffff;
  border: 1px solid #ebf0f5;
  opacity: 1;
  line-height: 48px;
  padding: 0 15px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-radius: 0px;
}

.fileBtn {
  margin-left: auto;
  margin-right: 10px;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 16px;
  color: #909499;
  opacity: 1;
}

.leftBtn {
  margin-left: auto;
  margin-right: 10px;
}

.leftText {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 16px;
  color: #606366;
  opacity: 1;
}

.reviewTitle {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  line-height: 0px;
  color: #606366;
}

.addReview {
  width: 74px;
  height: 32px;
  margin: 0 20px;
  background: #e6f1fc;
  border: 1px solid #a3cffd;
  opacity: 1;
  border-radius: 3px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 14px;
  color: #126bc9;
  opacity: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.reviewText {
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 18px;
  color: #909499;
  opacity: 1;
}

.reviewList {
  background: #ffffff;
  border: 1px dashed #e4e8ed;
  opacity: 1;
  border-radius: 0px;
  padding: 15px 15px 0 15px;
  position: relative;
}
.delete {
  position: absolute;
  right: 10px;
  top: 10px;
}
</style>
